Basic30天學會行動App-第8章.App處理輸入

16th鐵人賽處理輸入

因田木

2024-09-08 00:04:09

248 瀏覽

分享至

第8章: 處理App用戶輸入

在行動應用程式開發中，處理用戶輸入是關鍵的一環。無論是文字輸入、按鈕點擊，還是表單的驗證，這些都直接影響到應用程式的交互性和用戶體驗。這一章將探討如何在 B4X 平台上處理用戶輸入，並提供具體的範例程式來演示這些概念。

文字輸入與輸入框

文字輸入是許多應用程式中的基本功能之一，從簡單的搜尋框到複雜的表單，都需要處理用戶的文字輸入。在 B4A 中，EditText 是最常用的文字輸入框元件。

基本使用
在 B4A 中，你可以使用 EditText 來接受用戶的文字輸入。設置 EditText 是相對簡單的過程，可以直接在設計器中拖放，也可以透過程式碼進行配置。

Sub Process_Globals
    ' 全域變數
End Sub

Sub Globals
    ' 活動(Activity)變數
    Dim txtInput As EditText
    Dim lblOutput As Label
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("MainLayout")
    
    txtInput.Hint = "請輸入文字"
    txtInput.InputType = txtInput.INPUT_TYPE_TEXT
    
    lblOutput.Text = "輸入結果將顯示於此"
End Sub

Sub btnSubmit_Click
    Dim input As String = txtInput.Text
    lblOutput.Text = "你輸入的文字是: " & input
End Sub

上述範例中，EditText 元件用來接受用戶輸入的文字，並透過按鈕提交後顯示在 Label 中。Hint 屬性用來提示用戶該輸入框的用途，而 InputType 則用於指定輸入框的輸入類型，如普通文字、數字等。
2. 進階屬性
EditText 提供了多種進階屬性，允許開發者更細緻地控制輸入行為。例如：
• 輸入類型：你可以設置輸入框只接受特定類型的輸入，如數字、密碼等。
txtInput.InputType = txtInput.INPUT_TYPE_NUMBER ' 只接受數字輸入
• 字數限制：可以設置最大輸入字數，以避免用戶輸入過多文字。
txtInput.MaxLength = 50 ' 限制最多輸入50個字元
• 自動完成：設置 AutoComplete 屬性，提供輸入建議以提升用戶體驗。
txtInput.AutoComplete = True

按鈕與事件處理

按鈕是應用程式中最常見的交互元素之一。用戶透過點擊按鈕來觸發特定操作，如提交表單、進行計算或導航到另一個頁面。

基本按鈕事件
在 B4A 中，處理按鈕點擊事件非常簡單。每個按鈕都有一個 Click 事件，你可以在這個事件中定義按鈕被點擊時的行為。

Sub btnSubmit_Click
    Dim input As String = txtInput.Text
    If input.Trim <> "" Then
        lblOutput.Text = "你輸入的文字是: " & input
    Else
        lblOutput.Text = "輸入不可為空"
    End If
End Sub

在這個範例中，按鈕點擊事件處理用戶輸入，並將結果顯示在 Label 中。如果用戶未輸入任何文字，則提示用戶輸入不可為空。
2. 多重按鈕事件
當一個介面中有多個按鈕時，你可以為每個按鈕設置不同的 Click 事件，或者使用單一事件處理多個按鈕的點擊。

Sub Button_Click
    Dim btn As Button = Sender
    Select Case btn.Tag
        Case "Add"
            lblOutput.Text = "你點擊了新增按鈕"
        Case "Delete"
            lblOutput.Text = "你點擊了刪除按鈕"
    End Select
End Sub

在這個範例中，Tag 屬性用來區分不同的按鈕，並根據按鈕的標籤來執行不同的操作。

表單驗證

在處理用戶輸入時，表單驗證是確保資料正確性和完整性的重要環節。透過驗證，應用程式可以避免不正確或不完整的資料進入後端系統，從而減少潛在的錯誤和安全問題。

基本表單驗證
最常見的表單驗證包括檢查必填欄位、輸入格式和資料範圍等。例如，在輸入電子郵件地址時，你可能需要檢查用戶是否輸入了有效的電子郵件格式。

Sub btnSubmit_Click
    Dim email As String = txtEmail.Text
    If email.Trim = "" Then
        lblOutput.Text = "電子郵件不可為空"
    Else If Not Regex.IsMatch("^[\w\.-]+@[\w\.-]+\.\w{2,4}$", email) Then
        lblOutput.Text = "請輸入有效的電子郵件地址"
    Else
        lblOutput.Text = "電子郵件已提交"
    End If
End Sub

這段程式碼檢查用戶是否輸入了電子郵件地址，並確保輸入的地址符合基本的電子郵件格式。如果驗證失敗，系統會提示用戶重新輸入。
2. 進階表單驗證
對於更複雜的表單驗證，可能需要多個欄位的交叉驗證或伺服器端的驗證。例如，在註冊表單中，密碼和確認密碼欄位應該一致，這就是一個常見的交叉驗證。

Sub btnRegister_Click
    Dim password As String = txtPassword.Text
    Dim confirmPassword As String = txtConfirmPassword.Text
    
    If password.Length < 6 Then
        lblOutput.Text = "密碼長度需至少6位"
    Else If password <> confirmPassword Then
        lblOutput.Text = "兩次輸入的密碼不一致"
    Else
        lblOutput.Text = "註冊成功"
    End If
End Sub

這個範例展示了如何進行密碼和確認密碼的一致性驗證，確保用戶在註冊時輸入正確的資訊。
3. 即時驗證
即時驗證可以在用戶輸入的過程中即時給予反饋，而不需要等待用戶提交表單。這樣可以提高用戶體驗，減少錯誤的發生。

Sub txtPassword_TextChanged (Old As String, New As String)
    If New.Length < 6 Then
        lblPasswordHint.Text = "密碼過短"
        lblPasswordHint.TextColor = Colors.Red
    Else
        lblPasswordHint.Text = "密碼強度足夠"
        lblPasswordHint.TextColor = Colors.Green
    End If
End Sub

這段程式碼在用戶輸入密碼時，即時檢查密碼的長度，並通過 Label 提供即時的反饋，提示用戶當前的密碼強度是否符合要求。

範例程式

以下是一個綜合了文字輸入、按鈕事件處理和簡單表單驗證的完整範例：

Sub Globals
    Dim etInput As EditText
    Dim btnSubmit As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Main")
    
    etInput.Initialize("etInput")
    etInput.Hint = "請輸入電子郵件"
    Activity.AddView(etInput, 10dip, 10dip, 300dip, 50dip)
    
    btnSubmit.Initialize("btnSubmit")
    btnSubmit.Text = "提交"
    Activity.AddView(btnSubmit, 10dip, 70dip, 100dip, 50dip)
End Sub

Sub btnSubmit_Click
    Dim userInput As String
    userInput = etInput.Text
    
    If Not(IsValidEmail(userInput)) Then
        ToastMessageShow("請輸入有效的電子郵件地址！", False)
    Else
        ToastMessageShow("電子郵件地址有效！", False)
    End If
End Sub

Sub IsValidEmail(email As String) As Boolean
    Dim Pattern As String = "^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$"
    Dim Matcher As Matcher = Regex.Matcher(Pattern, email.ToUpperCase)
    Return Matcher.Find
End Sub

在這個範例中，當用戶輸入一個電子郵件地址並點擊提交按鈕時，系統會驗證該地址的格式。如果格式正確，會顯示"電子郵件地址有效！"的訊息；否則，會提示用戶重新輸入。